<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>5G消息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 强制竖屏 -->
		<meta name=screen-orientation content=portrait>
		<meta name=x5-orientation content=portrait>
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true">
		<!-- UC应用模式 -->
		<meta name="browsermode" content="application">
		<!-- QQ应用模式 -->
		<meta name="x5-page-mode" content="app">
		<!-- IOS启用 WebApp 全屏模式 -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- IOS全屏模式下隐藏状态栏/设置状态栏颜色 content的值为default | black | black-translucent -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 去除iphone 识别数字为号码邮箱跳转地图 -->
		<meta name="format-detection" content="telephone=no,email=no,adress=no">
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/message.css">
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入babel-polyfill es6转es5 -->
		<script src="https://cdn.bootcss.com/babel-polyfill/7.8.3/polyfill.min.js"></script>
		<!-- 引入 Swiper -->
		<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.3/dist/vue-awesome-swiper.min.js"></script>
		<!--[if lt IE 9]>
	         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	      <![endif]-->
	</head>
	<body>
		<!--container-->
		<div id="app">
			<section>
				<div class="pro_top pro_title wrap">
					<!-- <div class="pro_top_lf">
						<img class="commonSize imgInline" src="../img/arraw.png" alt="">
						<div class="pro_title">
							<p class="h2">5G消息</p>
							<p class="h3">服务信息</p>
						</div>
					</div>
					<div class="pro_top_rt">
						<img class="commonSize" src="../img/phone.png" alt="">
						<img class="commonSize" src="../img/more.png" alt="">
					</div> -->
					<p class="h2" id="show-bp">5G消息</p>
				</div>
			</section>
			<section>
				<div class="scroll">
					<!-- 开场白 -->
					<div style="margin-top:70px;padding-bottom: 2.2rem;" v-if="listData.length>0">
						<div style="overflow:hidden;margin-top: .3rem;" v-for="ele in listData">
							<p v-if="ele.text" v-html="ele.text" class="post-list-row" v-if="isStringOff" :class="{ messageLeft : ele.type==2, messageRight: ele.type ==1}">{{ele.text}}</p>
							<!-- 轮播图 -->
							<swiper v-if="ele.bannerList && ele.bannerList.length>0" class="wrapper-swiper-container post-list-row" :options="swiperOption">
								<swiper-slide v-for="(items,index) in ele.bannerList" :key="index">
									<div class="advertImg">
										<img style="width:100%;height:100%" :src="items.picture" alt="" srcset="">
									</div>
									<h2 class="advertTit">{{items.title}}</h2>
									<p class="subTitle" v-if="items.subtitle">{{items.subtitle}}</p>
									<div style="overflow: hidden;margin-top:.1rem" v-for="(ele, i) in items.buttons" :key="i" >
										<button type="text"  @click="swiperButtonEvent(ele)" class="makeButton">{{ele.title}}</button>
									</div>
								</swiper-slide>
								<div class="swiper-pagination" v-if="ele.bannerList.length>1" slot="pagination"></div>
							</swiper>
							<div style="overflow: hidden;" :class="{ messageLeft : ele.type==2, messageRight: ele.type ==1}" v-if="ele.file">
								<img :src="ele.file" alt="" style="width: 240px;height: 220px;">
							</div>
						</div>
					</div>
				</div>
			</section>
			<footer>
				<ul class="editButtons" v-if="quick_replies && quick_replies.length>0 && showFooterBtn && responses.length>0">
					<li v-for="(item,index) in quick_replies" @click="quickButtonEvent(item.payload)" :key="index">{{item.title}}</li>
				</ul>	
				<div class="footerBox" id="footerBox">
					<img class="commonSize common_lf veralign" src="../img/add_5g.png" alt="">
					<img class="commonSize common_lf veralign" src="../img/smile_5g.png" alt="">
					<img class="commonSize common_lf veralign" src="../img/voice_5g.png" alt="">
					<input id="inputBox" v-model="inputVal" @keyup.enter="sendEventAjax" type="text" class="common_lf inpBox" type="text">
					<p class="common_lf sendTxt" id="sendEvent" @click="sendEventAjax">发送</p>
					<!-- <img class="commonSize common_rt veralign" src="../img/send.png" alt=""> -->
				</div>
			</footer>
		</div>
	</body>
	
	<script src="../js/jquery1.7.js"></script>
	<script src="../js/rem.js"></script>
	
	<script type="text/javascript">
		Vue.use(window.VueAwesomeSwiper)
        new Vue({
            el:'#app',
            data:{
				inputVal: '',
				quick_replies: [],
				responses: [],
				listData:[],
				showFooterBtn: true,
				disableOff: false,
				isStringOff: true,
				userId: '',
				swiperOption: {
                    slidesPerView: 1.3,
					centeredSlides: true,
					spaceBetween: 10,
					grabCursor: true,
					// init: false,
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},  
                }
            },
            computed:{
            },
            methods:{
				// 轮播图底部按钮事件
				swiperButtonEvent(data){
					var text = data.payload || data.text
					this.sendEventAjax(text)
				},
				quickButtonEvent(text){
					this.sendEventAjax(text)
				},
				sendEventAjax(text){
					var _this = this;
					if (_this.disableOff) { return; }

					_this.disableOff = true;
					var list = {
						"type": "text",
						"text": _this.inputVal || text
					};
					// 添加list数据
					if (_this.inputVal){
						_this.listData.push({
							type: 1,
							text: _this.inputVal,
						})
					}
				
					axios({
                       	method:'post',
						url : 'http://172.25.126.88:3001/api/v1/bots/china-unicom-theatre/converse/'+_this.userId,//请求的 URL地址
						data : list,
                    }).then(function(res){
                        // console.log(res);
						_this.inputVal = null;
						_this.disableOff = false;

						res.data.responses.forEach((element, index) => {
							if (element.type == "typing"){
								res.data.responses.splice(index,1)
							}
						});
						_this.responses = res.data.responses;

						//  重新定义第0个数据
						var resultDataOne = [];
						//  更新底部按钮展示
						var resultAll = res.data.responses;
						for(var i = 0; i<resultAll.length; i++){
							if (resultAll[i].wrapped && resultAll[i].wrapped.text == 'hide'){
								_this.showFooterBtn = false;
							} else {
								_this.showFooterBtn = true;
							}

							if(resultAll[i].type && resultAll[i].type == 'carousel'){
								resultAll[i].elements.forEach((ele) =>{
									ele.picture = ele.picture.replace('localhost', '172.25.126.88');
								})
								// 购票订票轮播
								_this.listData.push({
									type: 2,
									bannerList: resultAll[i].elements
								})
							} else if (resultAll[i].type && resultAll[i].type == 'file') {
								console.log(resultAll[i])
								resultAll[i].url = resultAll[i].url.replace('localhost', '172.25.126.88');
								_this.listData.push({
									type: 2,
									file: resultAll[i].url
								})
							} else {
								// 开场白
								if (resultAll[i].wrapped && resultAll[i].wrapped.text !== 'hide') {
									_this.quick_replies = resultAll[i].quick_replies;
								}
								_this.listData.push({
									type: 2,
									text: (resultAll[i].wrapped && resultAll[i].wrapped.text && resultAll[i].wrapped.text) || resultAll[i].text
								})

								_this.listData.forEach((items, index) =>{
									if (items.text === 'hide') {
										_this.listData.splice(index, 1)
									}

									if (String(items.text).indexOf('%%')>-1){
										var textArr = String(items.text).split('%%');
										items.text = textArr.join('</br>');
									}
								})
							}
						}
                    });
				}
            },
            beforeMount(){
                // console.log("挂载前生命周期");
            },
            mounted(){
				const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
				const maxPos = $chars.length;
				let str = '';
				for (let i = 0; i < 10; i++) {
					str += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				this.userId = str;
            },
            watch:{
                
            }
        })
    </script>
</html>
